<template>
    <el-drawer v-model="properties.visible" :size="drawerHeight" :title="properties.title + ' 日志列表'" class="job-log__drawer-table" direction="btt">
        <data-table ref="logDataTableRef" :params="searchForm" api="/job/log" lazy selection>
            <template #button="{selections}">
                <el-button v-auth="'jobLog:delete'" @click="properties.handle.delete(selections)" :disabled="!selections?.length" type="danger"/>
            </template>
            <template #search>
                <el-form-item prop="jobId" v-show="false">
                    <el-input v-model="searchForm.jobId"/>
                </el-form-item>
                <el-form-item label="任务结果" prop="status" style="width: 220px">
                    <el-select v-model="searchForm.status" :empty-values="[null, undefined]">
                        <el-option :value="''" label="全部"/>
                        <el-option :value="'0'" label="失败"/>
                        <el-option :value="'1'" label="成功"/>
                    </el-select>
                </el-form-item>
            </template>
            <template #default>
                <el-table-column align="center" header-align="center" label="日志ID" prop="logId" width="100px">
                </el-table-column>
                <el-table-column align="left" header-align="center" label="调用方法" width="300px" prop="beanName" show-overflow-tooltip>
                    <template #default="scope">
                        {{ scope.row.beanName }}.{{ scope.row.methodName }}
                    </template>
                </el-table-column>
                <el-table-column align="left" header-align="center" label="参数" prop="params" show-overflow-tooltip width="450px"></el-table-column>
                <el-table-column align="center" header-align="center" label="状态" prop="status" width="100px">
                    <template #default="scope">
                        <el-tag :type="scope.row.status === '1'? 'success':'danger'">{{scope.row.status === '1'? '成功':'失败'}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" label="原因" prop="error" min-width="300px" show-overflow-tooltip/>
                <el-table-column align="right" header-align="center" label="耗时(单位: 毫秒)" prop="times" width="140px"/>
                <el-table-column align="center" header-align="center" label="完成日期" prop="createTime" width="180px"/>
            </template>
        </data-table>
    </el-drawer>
</template>

<script lang="ts" setup>
import { nextTick, reactive, ref} from "vue";
import DataTable from '@/components/data-table/index.vue';
import {service} from "@/utils";

const drawerHeight = ref(window.innerHeight * 0.75);


const searchForm = ref({
    jobId: null,
    status: ''
})

const logDataTableRef = ref<InstanceType<typeof DataTable>>();
const properties = reactive({
    visible: false,
    title: null,
    handle: {
        close: () => {
            properties.visible = false;
        },
        delete: (selections: { logId: string }[]) => {
            const ids = selections.map(item => item.logId);
            service.confirm(`确定对[${properties.title}]任务日志进行清除操作，本次共计清除${ids.length}条记录，,该操作不可逆?`, {
                url: '/job/log',
                data: {logIds: ids},
                success: logDataTableRef.value?.refresh
            })
        }
    }
});

// 展示弹窗
const open = (row: any) => {
    properties.visible = true;
    properties.title = row.name
    searchForm.value.jobId = row.jobId;
    searchForm.value.status = '';
    nextTick(() => logDataTableRef.value?.refresh())
};

defineExpose({open})
</script>